<template>
  <div class="home-main">
    <h1 class="text-h2"><IconLogo class="icon-logo-font" /><span>e Chat</span></h1>
    <h1 class="text-h3">一款非常简单的公共聊天室</h1>
    <van-button plain type="primary" @click="emits('start')">开始聊天!</van-button>
    <div>
      <h1 v-if="!isMobile()" class="text-h4">您好，您是买不起手机吗？</h1>
      <h1 v-else-if="isHuawei()" class="text-h4">🇨🇳 ohhhhhh！！华为爱国者！！🇨🇳</h1>
      <h1 v-else-if="isAndroid()" class="text-h4">😐 呵，贫穷的安卓用户</h1>
      <h1 v-else-if="isIOS()" class="text-h4">您好！尊贵的苹果🍎用户</h1>
      <h1 v-else class="text-h4">你好，我没判断出来你是什么成分</h1>
    </div>
  </div>
</template>

<script setup>
  import { isIOS, isMobile, isAndroid, isHuawei } from '@/utils'

  const emits = defineEmits(['start'])
</script>

<style lang="less" scoped>
  .home-main {
    box-sizing: border-box;
    position: absolute;
    top: 20%;
    width: 100%;
    // height: 150px;
    text-align: center;
  }
  .icon-logo {
    width: 150px;
    margin-bottom: 16px;
  }
  .icon-logo-font {
    position: relative;
    top: -1px;
    width: 45px;
  }
  .text-h2 {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    padding: 0 16px;
    font-size: 56px;
    line-height: 45px;
    font-weight: bold;
    background-image: -webkit-linear-gradient(315deg, #f6618e, #ef9eb7);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .text-h3 {
    margin-bottom: 30px;
    padding: 0 16px;
    font-size: 20px;
    color: var(--van-text-color-2);
  }
  .text-h4 {
    margin: 100px 0 30px;
    padding: 0 16px;
    font-size: 16px;
    color: var(--van-text-color-2);
  }
</style>
